<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="book" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单中心</title>
    <link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/foot.css">
    <link rel="stylesheet" type="text/css" href="../../boot/plugin/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/nav.css">

    <script src="http://47.100.102.177:8080/app/js/common/jquery-1.12.4.js"></script>
    <script src="http://47.100.102.177:8080/app/plugin/jquery.min.js"></script>
    <script src="../../boot/plugin/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="../../boot/plugin/layui/css/layui.css">

    <script src="../../boot/plugin/element/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.15.6/lib/index.js"></script>
    <!-- 必须先引入vue，  后使用element-ui -->
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="../../boot/plugin/element/element.css">
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css">
    <!-- 引入element 的组件库-->
    <script src="../../../boot/plugin/element/element.js"></script>
    <style>
        .bg,
        .bg-add {
            width: 100%;
            height: 100vh;
            position: absolute;
            top: 0px;
            background-color: rgba(0, 0, 0, 0.2);
            display: none;
        }

        .inf {
            background-color: white;
            height: 630px;
            width: 45%;
            margin: auto;
            margin-top: 60px;
            border-radius: 3px;
        }

        .inf-head {
            width: 100%;
            height: 30px;
            background-color: rgb(21, 184, 215);
            border-radius: 3px;
        }

        #close,
        #close-add {
            float: right;
            margin-right: 5px;
            background-color: red;
            color: white;
            font-weight: 900;
            border-radius: 5px;
            border: 0px;
            margin-top: 3px;
        }

        .inf-from {
            width: 100%;
            height: 600px;
            border-radius: 3px;
            overflow: scroll;
        }

        .mailTable,
        .mailTable1 {
            width: 100%;
            border-top: 1px solid #E6EAEE;
            border-left: 1px solid #E6EAEE;
            margin-bottom: 30px;
        }

        .mailTable tr td,
        .mailTable1 tr td {
            width: 200px;
            height: 35px;
            line-height: 35px;
            box-sizing: border-box;
            padding: 0 10px;
            border-bottom: 1px solid #E6EAEE;
            border-right: 1px solid #E6EAEE;
        }

        .mailTable tr td.column,
        .mailTable1 tr td.column1 {
            background-color: #EFF3F6;
            color: #393C3E;
            width: 30%;
        }

        #orde>tr>th{
            width: 100px;
            padding: 1px;
            text-align: center;
        }
        #td>tr>td{
            text-align: center;
        }

        .layui-table th{
            width: 200px;
            text-align: center;
        }
        .layui-table td{
            text-align: center;
        }

    </style>
</head>
<body style="">
<div class="header">
    <div class="container">
        <div class="header-log">
            <!--定义头部-->
            <div class='nav'>

                <ul>
                    <li><img src="http://47.100.102.177:8080/app/images/common/素材-大书.png"></li>
                    <li><a href='../index01'>主页</a></li>
                    <li><a href='#'>分类</a>
                        <ul>
                            <li><a href='../index01'>图书</a></li>
                            <li><a href='../index02'>电子书</a></li>
                        </ul>
                    </li>
                    <book:if test="${user!=null}">
                        <li><a href='#'>${user.uname}</a>
                            <ul>
                                <li><a href='../car/shoppingcar?account=${user.account}'>购物车</a></li>
                                <li><a href='../personal/center?status=1'>个人信息</a></li>
                                <li><a href='../order/order'>订单信息</a></li>
                            </ul>
                        </li>
                        <li><a href="/boot/users/exit">安全退出</a></li>
                    </book:if>
                    <li><a href='../login'>登陆</a></li>
                    <li><a href='../login'>注册</a></li>
                </ul>
            </div>
        </div>

    </div>
</div>

<div id="app" style="margin-top: 50px">
    <el-row class="tac">
        <el-col :span="4">
            <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose">
                <el-menu-item index="2" id="All">
                    <i class="el-icon-goods"></i>
                    <span slot="title">订单详情</span>
                </el-menu-item>
                <el-menu-item index="1" id="back">
                    <i class="el-icon-sold-out"></i>
                    <span slot="title">未支付</span>
                </el-menu-item>
            </el-menu>
        </el-col>
        <el-col :span="20">
            <div style="width: 100%;height: 500px; overflow-y: scroll" id="Allin">
                <table class="table table-condensed">
                    <caption>我的订单</caption>
                    <thead>
                    <tr>
                        <th>订单号</th>
                        <th>购买时间</th>
                        <th>订单状态</th>
                        <th>收货地址</th>
                        <th>订单价格</th>
                        <th>查看细明</th></tr>
                    </thead>
                    <tbody id="tb">

                    </tbody>
                </table>
            </div>
            <div style="width: 100%;height: 500px; overflow-y: scroll; display: none" id="backin">
                <table class="table table-condensed">
                    <caption>我的订单</caption>
                    <thead id="orde">
                    <tr>
                        <th>订单号</th>
                        <th>购买时间</th>
                        <th>订单状态</th>
                        <th>收货地址</th>
                        <th>订单价格</th>
                        <th>支付/取消</th>
                    </tr>
                    </thead>
                    <tbody id="td">

                    </tbody>
                </table>
            </div>
        </el-col>
    </el-row>
</div>


<div class="foot">
    <!-- 多快好省start -->
    <div class="dkhs">
        <ul>
            <li>
                <div class="duo"></div>
                <p>品类齐全，轻松购物</p>
            </li>
            <li>
                <div class="kuai"></div>
                <p>多仓直发，急速配送</p>
            </li>
            <li>
                <div class="hao"></div>
                <p>正平行货，精致服务</p>
            </li>
            <li>
                <div class="sheng"></div>
                <p>天天低价，畅选无忧</p>
            </li>
        </ul>
    </div>
    <!-- 多快好省end -->

    <!-- 结尾start -->
    <div class="jiewei">
        <div class="j1">
            <ul>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">关于我们</a></li>
                <li class="line"></li>
                <li><a href="#">English</a></li>
                <li class="line"></li>
                <li><a href="#">Site</a></li>
                <li class="line"></li>
                <li><a href="#">Media & IR</a></li>
                <li class="line"></li>
            </ul>
        </div>
        <div class="j2">
            <p>云上书屋收录的免费书籍作品、频道内容、书友评论、胪上文字图片等其他切内容及在云上书屋所做之广告均属用户个人行为,与本网站无关。</p>
        </div>
        <div class="j3">
            <ul>
                <li class="l1">
                    <a href="#"></a>
                </li>
                <li class="l2">
                    <a href="#"></a>
                </li>
                <li class="l3">
                    <a href="#"></a>
                </li>
                <li class="l4">
                    <a href="#"></a>
                </li>
                <li class="l5">
                    <a href="#"></a>
                </li>
                <li class="l6">
                    <a href="#"></a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 结尾end -->
</div>

<div class="bg" style="position: fixed;">
    <div class="inf">
        <div class="inf-head">
            <h4 style="color: white;display: inline;line-height: 30px;margin-left: 5px;">订单细明</h4>

            <input type="button" id="close" value="×">
        </div>
        <div class="inf-from">
            <table class="table table-condensed">
                <thead>
                <tr>
                    <th>图片</th>
                    <th>书名</th>
                    <th>购买数量</th>
                    <th>小计</th>
                    <th>状态</th>
                    <th>评价</th>
                    <th></th>
                </tr>
                </thead>
                <tbody id="ord">

                </tbody>
                <tfoot>
                <tr>
                    <td colspan="6" style="text-align: right">总价 :<span id="total" style="float: right;margin-right: 10px"></span></td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>



<div id="show" style="display: none; overflow-y: scroll;">
    <table class="layui-table" id="sh">
        <thead>
        <tr>
            <th>书图</th>
            <th>介绍</th>
            <th>购买数量</th>
            <th>小计</th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody id="sw">

        </tbody>
    </table>
</div>


<script>
    var Main = {
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
    function orderList(object) {
        let bg = document.getElementsByClassName("bg");
        bg[0].style.display = "block";
        let buyId = object.parentNode.parentNode.firstChild.innerText;
        // alert(buyId);
        $.get("/boot/order/orderList",{buyId:buyId},function (res) {
            let str ="";
            let orderlist = res;
            let ord = document.getElementById("ord");
            let total = document.getElementById("total");
            let price = document.getElementsByClassName("price");
            let count =0;
            for(let i=0;i<orderlist.length;i++){
                str +='<tr>';
                str += '<td style="padding: 2px"><img src="'+orderlist[i].buyImg+'" style="width: 25px;height: 40px"></td>';
                str += '<td><div style="width: 55px;height: 20px;overflow: hidden;text-overline: ellipsis;white-space: nowrap;line-height: 20px;">'+orderlist[i].buyName+'</div></td>';
                str += '<td>' +orderlist[i].buyNum+ '</td>';

                str += '<td class="price">' +orderlist[i].buyPrice+ '</td>';
                if(orderlist[i].buyStatus==1){
                    str += '<td>待发货</td>';
                }else if(orderlist[i].buyStatus==2){
                    str += '<td><button type="button" onclick="confirms(this,\''+orderlist[i].id+'\','+orderlist[i].productId+','+orderlist[i].buyType +')">确认收货</button></td>';
                }else if(orderlist[i].buyStatus==4){
                    str += '<td>退款审核中</td>';
                }else if(orderlist[i].buyStatus==5){
                    str += '<td>退款成功</td>';
                }else if(orderlist[i].buyStatus==3){
                    str += '<td>已收货</td>';
                }

                if(orderlist[i].buyStatus==3 && orderlist[i].buyEvaluate==0){
                    str += '<td><button type="button" onclick="commit('+orderlist[i].productId+','+orderlist[i].buyType+',\''+orderlist[i].id+'\')" style="border: 0px">评价</button> </td>';
                    // str += '<input type="button" onClick="gotoNode(+\'' + result.name + '\'+)" />'
                    // alert(orderlist[i].id);
                }else if(orderlist[i].buyEvaluate==1){
                    str += '<td>已评价</td>';
                }else{
                    str +='<td>收货后可评价</td>';
                }
                if(orderlist[i].buyStatus==1 || orderlist[i].buyStatus==2){
                    str += '<td><button type="button" onclick="back(\''+orderlist[i].id+'\')" style="border: 0px">申请退款</button> </td>';
                }
                // str += '<td><a href="javascript:del('+address[i].id+')">删除</a></td>';
                str += '</tr>';
                count+=orderlist[i].buyPrice*1;
            }
            ord.innerHTML=str;
            total.innerText=count;

        })


    }
    $(function(){
        $("#All").click(function () {
            $("#Allin").css("display","block")
            $("#backin").css("display","none")
        })
        $("#back").click(function () {
            $("#backin").css("display","block")
            $("#Allin").css("display","none")
        })



        $("#close").click(function() {
            $(".bg").css("display", "none");
        });

        //
        // function orderList() {
        //     let bg = document.getElementsByClassName("bg");
        //     bg[0].style.display = "block";
        // }



        <%--console.log(${people.peopleId})--%>
        $.get("/boot/order/all",{peopleId:${people.peopleId}},function (res) {
            let str = "";
            let order = res;
            let tb = document.getElementById("tb");
            if(res!=null && res[0]!=null){
                for(let i=0;i<order.length;i++){
                    str +='<tr>';
                    str += '<td>' + order[i].buyId + '</td>';
                    str += '<td>' + order[i].buyTime + '</td>';
                    if(order[i].stateId==1){
                        str += '<td>已支付</td>';
                    }else{
                        str += '<td>未支付</td>';
                    }
                    str += '<td>' + order[i].address + '</td>';


                    str += '<td>' + order[i].totalMoney + '</td>';
                    str += '<td><button type="button" onclick="orderList(this)" style="border: 0px">查看订单</button> </td>';
                    // str += '<td><a href="javascript:del('+address[i].id+')">删除</a></td>';
                    str += '</tr>';

                }

            }else{
                str +='<tr>';
                // str += '<td>' + order[i].totalMoney + '</td>';

                str +='<td colspan="5" style="text-align: center"><a href="../index01">当前没有订单,快去购买吧</a></td>';
                str += '</tr>';
            }
            tb.innerHTML=str;
        })
    })

    function commit(productId,buyType,id) {
        // alert(productId);
        // alert(id);
        window.location.href = '/boot/comment/comment?'+'bookId='+productId+'&bookTypeId='+buyType+'&Id='+id;
    }

    function confirms(object,id,productId,buyType) {
        if(confirm("如确认收货，不可退款！你确认收货吗")){
            var password = prompt("请输入密码：");




                $.get("/boot/order/confirm",{id:id,password:password},function (res) {
                    if(res.code=="201"){
                        layer.msg("密码不能为空");
                    }else if(res.code=="202"){
                        layer.msg("密码错误");
                    }
                    else if(res.code=="200"){
                        layer.msg("收货成功");
                        let status = object.parentNode;
                        status.innerHTML='<td>已收货</td>';
                        let comment = status.nextSibling;
                        comment.innerHTML='<td><button type="button" onclick="commit('+productId+','+buyType+',\''+id+'\')" style="border: 0px">评价</button> </td>';
                        let back = comment.nextSibling;
                        back.innerHTML=''
                    }
                })

            }
        }
        <%--alert("${user.password}");--%>


    function back(id) {
        window.location.href="/boot/back/back?orderListId="+id;
    }


    $.get("/boot/buy/get",{uid:${people.peopleId}},function (res) {
        let str = "";
        let td = document.getElementById("td");
        let list=res.data;
        if(res.data!=null){
            for(let i=0;i<list.length;i++){
                str +='<tr>';
                str += '<td>' + res.data[i].buyId + '</td>';
                str += '<td>' + res.data[i].buyTime+ '</td>';
                str += '<td style="color: red">未支付</td>';
                str += '<td>' + res.data[i].address + '</td>';
                str += '<td>' + res.data[i].totalMoney;+ '</td>';
                str += '<td><button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="Topay('+res.data[i].buyId+')">支付</button>'
                    +'<button type="button" class="layui-btn layui-btn-warm layui-btn-sm" onclick="Show('+res.data[i].buyId+')">详情</button>'
                    +'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm" onclick="Tocancel('+res.data[i].buyId+')">取消</button>'+
                    '</td>';
                str += '</tr>';
            }
        }else
        {
            str += '<tr>';
            str += '<td colspan="5" style="text-align: center"><a href="../index01">当前没有订单,快去购买吧</a></td>'
            str += '</tr>';
        }
        td.innerHTML = str;
    })

    function Topay(bid) {
        window.location="/boot/payOrder?orderSn="+bid+"&id="+bid;
    }
    function Tocancel(bid) {
        $.get("/boot/confirm/del",{bid:bid},function (res) {
            layer.msg(res.msg);
            location.reload();
        })
    }

    function Show(bid) {
        $.get("/boot/confirm/show",{bid:bid},function (res) {
            let str = "";
            let sw = document.getElementById("sw");
            let list=res.data;
            if(res!=null && res.data!=null){
                for(let i=0;i<list.length;i++){
                    str +='<tr>';
                    str += '<td><img src=" ' + res.data[i].buyImg + '"></td>';
                    str += '<td>' + res.data[i].buyName+ '</td>';
                    str += '<td>' + res.data[i].buyNum + '件</td>';
                    str += '<td>￥' + res.data[i].buyPrice+ '</td>';
                    str += '<td style="color: red">未支付</td>';
                    str += '</tr>';
                }
            }else
            {
                str += '<tr>';
                str += '<td colspan="5" style="text-align: center"><a href="../index01">当前没有订单,快去购买吧</a></td>'
                str += '</tr>';
            }
            sw.innerHTML = str;
            layer.open({
                type: 1,
                content: $('#show')
            });
        })
    }




</script>
</body>
</html>